import './App.css';
import HelloMessage from './hello.js'
import Clock from './hello_state'
import ShowMount from './set_state'
import Children from './slot_children'

function App() {
  // const tem = <p className="slot-child"><span>1</span><span>2</span></p>
  return (
    <div className="App">
      <HelloMessage name="romo"></HelloMessage>
      <Clock title="时间1"/>
      
      <ShowMount name="romo" startMount={2} callback={(mount) => {
        console.log('callback', mount)
      }}/>
      <Children>
        <span>1</span>
        <span>2</span>
      </Children>
      <div className="test"></div>
    </div>
  );
}
export default App;

// import { Observable } from 'rxjs'
// 当订阅下面代码中的 Observable 的时候会立即(同步地)推送值1、2、3，然后1秒后会推送值4，再然后是完成流
// 通过create方法创建一个Observable
// 回调函数会接受observer参数，也就是观察者角色
// const observable = Observable.create(observer => {
//   observer.next(1);
//   observer.next(2);
//   observer.next(3);
//   setTimeout(() => {
//     observer.next(4);
//     observer.complete();
//   }, 1000);
// });
// console.log('----->just before subscribe');
// // Observe观察者
// // Observer 是一个对象，这个对象具有三个方法，分别是 next, error, complete
// // 要使用观察者，需要把它提供给 Observable 的 subscribe 方法
// const observe = {
//   next: x => console.log('value::  ' + x),
//   error: err => console.error('something wrong occurred: ' + err),
//   complete: () => console.log('done'),
// };
// // 订阅这个 observable
// // 只有在订阅之后，才会在流Observable变化的时候，调用observer提供的方法，并通知他
// observable.subscribe(observe);
// console.log('--->just after subscribe');
// 输出
/**
  ----->just before subscribe
  value::  1
  value::  2
  value::  3
  --->just after subscribe
  value::  4
  done
*/


// const { of, from } = require('rxjs')

// // Operators 操作符
// const Op = require('rxjs/operators')
// const example = from([4, 6, 7]).pipe(
//   Op.startWith(0), // 开头追加0
//   Op.skip(1), // 跳过第一个
//   Op.filter(v => v > 6) // 过滤得到大于6的
// )
// example.subscribe(v => console.log('op->> ', v))
/**
 * 输出
 * op->>  7
 */

// subject 主体

// const Rx = require('rxjs')

// const source = Rx.interval(1000).pipe(Op.take(3));
// const subject = new Rx.Subject();

// // observer 其实就是实现了next方法，error方法和complete方法的对象
// const observerA = {
//   next: value => {
//     console.log(`A:` + value )
//   },
//   error: error => {
//     console.log('Error:', error);
//   },
//   complete: () => {
//     console.log('complete');
//   }
// };

// const observerB = {
//   next: value => {
//     console.log(`B:` + value)
//   },
//   error: error => {
//     console.log('Error:', error);
//   },
//   complete: () => {
//     console.log('complete');
//   }
// };

// // 不会执行，相当于注册 observer，只是将给定的观察者注册到观察者列表中
// subject.subscribe(observerA);
// subject.subscribe(observerB);
// // 执行
// source.subscribe(subject);









